<template>
  <el-container class="calendar height100">
    <el-main class="el-mainContent overflowNone padding0 height100" ref="calDetail">
      <el-container class="width100 asideR " ref="calDetailCon">
        <el-aside>
          <el-form size="small">
            <el-row>
              <el-col :span="20">
                <p class="calendar_title">{{detail.name}}</p>
                <!-- <el-form-item label="名称" class="marginBot0 labelHeight">
                  <el-input type="text" v-model="detail.name"></el-input>
                </el-form-item> -->
              </el-col>
            </el-row>
            <el-row height="300">
              <el-col :span="24">
                <!-- <p class="calendar_detailP">日历信息：</p> -->
                <p class="calendar_detailP2">{{detail.remark}}</p>
                
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20" class="textCen">
                <p class="calendar_detailP3">
                  {{changeNow}}  {{isWorkDay?$t('weekdays'):$t('non_weekdays')}}
                </p>
                <!-- <div v-if="isWorkDay">
                  08:30 ~ 12:30 <br>
                  14:00 ~ 18:00 <br>
                </div> -->
                <!-- 工作日历列表 -->
                <el-row v-for="(elm,ind) in workTimes" :key="ind">
                  <p class="calendar_detailP4" v-if="elm.startTime!=''">{{elm.startTime}}~{{elm.endTime}}</p>
                </el-row>
              </el-col>
              
            </el-row>
          </el-form>
        </el-aside>
        <el-container>
          <el-main class="paddingT0">
            <el-form size="small">
              <el-row>
                <el-col :span="8">
                  <el-form-item  class="marginBot0 labelHeight paddingT10 marginLeft10">
                    <el-date-picker
                      v-model="changeYears"
                      type="year"
                      :placeholder="$t('select_year')"
                      style="width:100%;"
                      >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8" >
                  <el-form-item  class="marginBot0 labelHeight paddingT10 marginLeft10">
                    <el-date-picker
                      v-model="changeMonth"
                      type="month"
                      format="MM"
                      :placeholder="$t('select_month')"
                      style="width:100%;"
                      >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                
              </el-row>
              <el-row class="relative">
                <el-col :span="20"  height="300" class="calendarCon">
                  <!-- changeNow -->
                  <el-calendar v-model="changeNow" :first-day-of-week="startDay" v-if="noworkdaysHave && nospecialdaysHave">
                    <template
                    slot="dateCell"
                    slot-scope="{date, data}">
                        <div :class="isWork(date)" >
                          <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>

                          <!-- <div  v-for="(item,index) in standardDays.datas" :key="index">
                            <div
                            :class="item.workingDay ? 'normalDay':'noworkday'">
                              <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>

                            </div>
                          </div> -->
                          <!-- <div v-for="(item,index) in calendarData" :key="index">
                            <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
                              <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
                                <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
                                    <div class="is-selected">{{item.things}}</div>
                                </el-tooltip>
                              </div>
                              <div v-else></div>
                            </div>
                            <div v-else></div>
                          </div> -->
                        </div>
                    </template>
                  </el-calendar>
                </el-col>
                <el-col :span="3" class="calendar_legendCol">
                  <ul class="calendar_legendUl">
                    <li >
                      <i class="normalDay calendar_legendI normalDayBorder"></i>
                      <span class="calendar_legend">{{$t('weekdays')}}</span>
                    </li>
                    <li >
                      <i class="noworkday calendar_legendI noworkdayBorder"></i>
                      <span class="calendar_legend">{{$t('non_weekdays')}}</span>
                    </li>
                    <li >
                      <i class="specialDay calendar_legendI specialDayBorder"></i>
                      <span class="calendar_legend">{{$t('calendar_day')}}</span>
                    </li>
                    <li >
                      <i class="nowDay calendar_legendI nowDayBorder"></i>
                      <span class="calendar_legend">{{$t('calendar_today')}}</span>
                    </li>
                  </ul>
                </el-col>
              </el-row>
            </el-form>
          </el-main>
        </el-container>
      </el-container>
      
    </el-main>
    
    <standardDay :visible.sync="standardDayVisible" :detail="detail" v-if="standardDayVisible"/>
    <specialDay :visible.sync="specialDayVisible" :detail="detail" v-if="specialDayVisible"/>

  </el-container>
</template>

<script>
import standardDay from "@/components/standardDay.vue";
import specialDay from "@/components/specialDay.vue";

export default {
  components:{
    standardDay,
    specialDay,
  },
  props:["detail"],
  data() {
    return {
      years:'2019',
      month:"2019-01",
      day:"01",
      now:new Date(),
      startDay:7,
      isWorkDay:true,
      standardDayVisible:false,
      specialDayVisible:false,
      specialDays:[],
      standardDays:[],
      noWorkings:[],
      specialDaysEng:[],
      workTimes:[],
      workTimesSta:[],
      value: new Date(),
      calendarData: [
          { months: ['09', '12'],days: ['15'],things: '看电影' },
          { months: ['10', '12'], days: ['02'],things: '去公园野炊' },
          { months: ['12'], days: ['07'],things: '看星星' },
          { months: ['12'], days: ['09'],things: '看月亮' }   
      ],
      noworkdaysHave:false,
      nospecialdaysHave:false,
      first:false,
    };
  },
  mounted(){
    // var h = document.documentElement.clientHeight || document.body.clientHeight;    
  },
  computed:{
    changeNow: {
      get() {
        return this.resolvingDate(this.now,'all');
      },
      set(val) {
        this.now=val;
        let weekDay = this.getDateWeek(this.now);//返回当前是星期几
        let weekdays = this.getStandardDays(weekDay);//传入当前的星期数，然后返回这个星期数的信息
          if(weekdays.workingDay){

            //是工作日
            this.isWorkDay=true;

            if((weekdays.startTime1!="" && weekdays.endTime1!="")||(weekdays.startTime2!="" && weekdays.endTime2!="")||(weekdays.startTime3!="" && weekdays.endTime3!="")||(weekdays.startTime4!="" && weekdays.endTime4!="")||(weekdays.startTime5!="" && weekdays.endTime5!="")){
              this.workTimes=[{
                "startTime":weekdays.startTime1,
                "endTime":weekdays.endTime1
              },{
                "startTime":weekdays.startTime2,
                "endTime":weekdays.endTime2
              },{
                "startTime":weekdays.startTime3,
                "endTime":weekdays.endTime3
              },{
                "startTime":weekdays.startTime4,
                "endTime":weekdays.endTime4
              },{
                "startTime":weekdays.startTime5,
                "endTime":weekdays.endTime5
              }]
            }else{
              //也是工作日但是没有设置上班时间
              this.workTimes=[{
                "startTime":"08:00",
                "endTime":"12:00"
              },{
                "startTime":"14:30",
                "endTime":"18:00"
              }]
            }
            
          }else{
            //不是工作日
            this.isWorkDay=false;
            this.workTimes=[];

          }
        let specialDayYes= this.getSpecialDay(this.now);//是否是例外日 true是，false不是
        if(specialDayYes){
          //是例外日规定的日子，
          if(specialDayYes.workingDay){
            //是工作日
            this.isWorkDay=true;
            if((specialDayYes.startTime1!="" && specialDayYes.endTime1!="")||(specialDayYes.startTime2!="" && specialDayYes.endTime2!="")||(specialDayYes.startTime3!="" && specialDayYes.endTime3!="")||(specialDayYes.startTime4!="" && specialDayYes.endTime4!="")||(specialDayYes.startTime5!="" && specialDayYes.endTime5!="")){
              this.workTimes=[{
                "startTime":specialDayYes.startTime1,
                "endTime":specialDayYes.endTime1
              },{
                "startTime":specialDayYes.startTime2,
                "endTime":specialDayYes.endTime2
              },{
                "startTime":specialDayYes.startTime3,
                "endTime":specialDayYes.endTime3
              },{
                "startTime":specialDayYes.startTime4,
                "endTime":specialDayYes.endTime4
              },{
                "startTime":specialDayYes.startTime5,
                "endTime":specialDayYes.endTime5
              }]
            }else{
              this.workTimes=[{
                "startTime":"08:30",
                "endTime":"12:00"
              },{
                "startTime":"14:00",
                "endTime":"18:00"
              }]
            }
            
          }else{
            //不是工作日
            
            this.isWorkDay=false;
            this.workTimes=[];
          }
          
          
        }else{
          //不是例外日规定的日子
          
        }
        return this.now;
      }
    },
    changeMonth: {
      get() {
        if(!this.years){
          return this.resolvingDate(new Date(),'years')+'-'+this.month;
        }
        else return this.years+"-"+this.month
      },
      set(val) {
        if(val){
          let date=this.resolvingDate(val,'month');
          this.month=date;
          if(!this.years){
            this.years=this.resolvingDate(new Date(),'years');
          }
          this.now=this.years+"-"+this.month;
          return date
        }else{
          let date="";
          this.month=""
          return date
        }
        
        
      }
    },
    changeYears: {
      get() {
        return "'"+this.years+"'"
      },
      set(val) {
        if(val){
          let date=this.resolvingDate(val,'years');
          this.years=date;
          this.now=this.years+"-"+this.month;
          return date
        }else{
          let date="";
          this.years=""
          return date
        }
        
      }
    },
    
  },
  created() {
    this.getData();
    
  },
  watch:{
    standardDayVisible(newVal,oldVal){
      if(newVal!=oldVal && newVal==false){
        this.getData()
      }
    },
    specialDayVisible(newVal,oldVal){
      if(newVal!=oldVal && newVal==false){
        this.getData()
      }
    }
  },
  methods:{
    isWork(date){
      let nowDay = this.resolvingDate(new Date(),"all");
      let dateAll= this.resolvingDate(date,"all")
      let w=this.getDateWeek(date);
      let normal=this.timeChangetype(date);
      let iswork=false;
      let isspecial=false;
      let isnow = false;
      if(dateAll == nowDay){
        isnow=true;
      }
      this.noWorkings.forEach(elm=>{
        if(w==elm){
          iswork=true;
        }
      })
      let that=this;
      this.specialDays.datas.forEach(el=>{
        let start=that.timeChangetype(el.startDate)
        let end=that.timeChangetype(el.endDate)

        if(start<normal&& normal<end){
          isspecial=true;
          // if(el.workingDay){
          //   iswork=false;
          // }else{
          //   iswork=true;
          // }
        }
      })
      if(isnow){
        return "nowDay"
      }else if(isspecial ){
        return "specialDay";
      }else if(iswork && !isspecial){
        return "noworkday";
      }else{
        return "normalDay";
      }
    },
    getData(){
      let that=this;
      this.now=new Date();
      this.$api.getStandardDay(
        {domainid:this.$route.query.domainid,id:this.detail.id},
        {
          onSucess: resp => {
            that.standardDays = resp.data.data;
            that.standardDays.datas.forEach(elm=>{
              if(!elm.workingDay ){
                switch(elm.weekDays){
                  case 6:
                    that.noWorkings.push("星期六")
                  break;
                  case 5:
                    that.noWorkings.push("星期五")
                  break;
                  case 4:
                    that.noWorkings.push("星期四")
                  break;
                  case 3:
                    that.noWorkings.push("星期三")
                  break;
                  case 2:
                    that.noWorkings.push("星期二")
                  break;
                  case 1:
                    that.noWorkings.push("星期一")
                  break;
                  case 0:
                    that.noWorkings.push("星期日")
                  break;
                }
                // this.noWorkings.push(elm);

              }
            })
            that.noworkdaysHave=true;
            let weekDay = that.getDateWeek(this.now);//返回当前是星期几
            let weekdays = that.getStandardDays(weekDay);//传入当前的星期数，然后返回这个星期数的信息
            if(weekdays.workingDay){
                //是工作日
                if((weekdays.startTime1!="" && weekdays.endTime1!="")||(weekdays.startTime2!="" && weekdays.endTime2!="")||(weekdays.startTime3!="" && weekdays.endTime3!="")||(weekdays.startTime4!="" && weekdays.endTime4!="")||(weekdays.startTime5!="" && weekdays.endTime5!="")){
                  this.workTimes=[{
                    "startTime":weekdays.startTime1,
                    "endTime":weekdays.endTime1
                  },{
                    "startTime":weekdays.startTime2,
                    "endTime":weekdays.endTime2
                  },{
                    "startTime":weekdays.startTime3,
                    "endTime":weekdays.endTime3
                  },{
                    "startTime":weekdays.startTime4,
                    "endTime":weekdays.endTime4
                  },{
                    "startTime":weekdays.startTime5,
                    "endTime":weekdays.endTime5
                  }]
                }else{
                  this.workTimes=[{
                    "startTime":"08:00",
                    "endTime":"12:00"
                  },{
                    "startTime":"14:30",
                    "endTime":"18:00"
                  }]
                }
                
              }else{
                //不是工作日
                this.isWorkDay=false;
                this.workTimes=[];

              }
            // for(let i=0;i<weekdays.length;i++){
            //   let el=weekdays[i];
            //   if(el==weekDay){
            //     this.isWorkDay=false;
            //   }else{
            //     this.isWorkDay=true;
            //   }
            // }
          }
        }
      );
      this.$api.getSpecialDay(
        {domainid:this.$route.query.domainid,id:this.detail.id,currpage:1,pagelines:1000000000},
        {
          onSucess: resp => {
            that.specialDays = resp.data.data;
            that.specialDays.datas.forEach((elm)=>{
              elm.startDate=that.resolvingDate(elm.startDate,"possess")
              elm.endDate=that.resolvingDate(elm.endDate,"possess")
            })
            that.nospecialdaysHave=true;
            let specialDayYes= this.getSpecialDay(this.now);//是否是 例外日规定的非工作日/工作日，返回当前的例外日信息
            if(specialDayYes){
              //是例外日规定的日子，
              if(specialDayYes.workingDay){
                //是例外日规定的工作日
                if((specialDayYes.startTime1!="" && specialDayYes.endTime1!="")||(specialDayYes.startTime2!="" && specialDayYes.endTime2!="")||(specialDayYes.startTime3!="" && specialDayYes.endTime3!="")||(specialDayYes.startTime4!="" && specialDayYes.endTime4!="")||(specialDayYes.startTime5!="" && specialDayYes.endTime5!="")){
                  this.workTimes=[{
                    "startTime":specialDayYes.startTime1,
                    "endTime":specialDayYes.endTime1
                  },{
                    "startTime":specialDayYes.startTime2,
                    "endTime":specialDayYes.endTime2
                  },{
                    "startTime":specialDayYes.startTime3,
                    "endTime":specialDayYes.endTime3
                  },{
                    "startTime":specialDayYes.startTime4,
                    "endTime":specialDayYes.endTime4
                  },{
                    "startTime":specialDayYes.startTime5,
                    "endTime":specialDayYes.endTime5
                  }]
                }else{
                  this.workTimes=[{
                    "startTime":"08:30",
                    "endTime":"12:00"
                  },{
                    "startTime":"14:00",
                    "endTime":"18:00"
                  }]
                }
                
              }else{
                //是例外日规定的工作日，但是例外日没规定上下班时间
                this.isWorkDay=false;
                this.workTimes=[];

              }
            }
          }
        }
      );
      
      
      this.years=this.now.getFullYear().toString();
      this.month=(this.now.getMonth()+1).toString();
      
    },
    getStandardDays(weekDay){
      // let weekdays=[];
      for(let i=0;i<this.standardDays.datas.length;i++){
        let elm=this.standardDays.datas[i];
        switch(elm.weekDays){
          case 0:
            if(weekDay=="星期日"){
              return elm;
            }
            break;
          case 1:
            if(weekDay=="星期一"){
              return elm;
            }
            break;
          case 2:
            if(weekDay=="星期二"){
              return elm;
            }
            break;
          case 3:
            if(weekDay=="星期三"){
              return elm;
            }
            break;
          case 4:
            if(weekDay=="星期四"){
              return elm;
            }
            break;
          case 5:
            if(weekDay=="星期五"){
              return elm;
            }
            break;
          case 6:
            if(weekDay=="星期六"){
              return elm;
            }
            break;
          default:
            break;
        }
      }
      return false;
    },
    getSpecialDay(date){
      let nowDate=new Date(date);
      let ms = nowDate.getTime(nowDate);
      for(let i=0;i<this.specialDays.datas.length;i++){
        let elm=this.specialDays.datas[i];
        let min = new Date(elm.startDate);
        let max = new Date(elm.endDate);
        let minMs = min.getTime(min);
        let maxMs = max.getTime(max);
        if(minMs<ms&&ms<maxMs){
          return elm;
        }
      }
      return false;
    },
    onStandardDayBtn(){
      this.standardDayVisible=true;
    },
    onSpecialBtn(){
      this.specialDayVisible=true;
    },
    onExitBtn(){
      this.$emit("exit")
    },
    timeChangetype(stringTime){
        var timestamp2 = Date.parse(new Date(stringTime));
        return timestamp2;
    },
    resolvingDate(date,type){
      let d = new Date(date);
      let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
      let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
      let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
      let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
      let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();
      let times;
      if(type=='all'){
        times=d.getFullYear() + '-' + month + '-' + day ;
      // + ' ' + hours + ':' + min + ':' + sec
      }else if(type=='month'){
        times= month ;

      }else if(type=='years'){
        times=d.getFullYear()  ;

      }else if(type == "possess"){
        times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
      }else if(type == "timeStamp"){
        times=d;
      }
      return times
    },
    //返回指定时间是星期几,
    getDateWeek(date){
      var day = new Date(Date.parse(date));
      var today = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
      var week = today[day.getDay()];
      return week;
    },
    
  },
  

};
</script>

<style>
</style>